<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<style>
	body {
		background-color: #f2f2f2;
	}
	
	header {
		height: 40px;
		overflow: hidden;
		position: relative;
		border-bottom: 1px solid #ccc;
	}
	
	header h2 {
		text-align: center;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px
	}
	
	header .icon {
		width: 30px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-justify-content: flex-end;
    	justify-content: flex-end;
    	padding-right: 19px
	}
	
	header .user {
		right: 0;
		left: inherit;
		padding-right: 19px;
	}
	
	header .icon img {
		width: 12px;
	}
	
	header .user img {
		width: 20px;
	}
	
	header .user a {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	section {
		margin-top: 19px;
		padding: 0 10px 10%;
	}
	
	section .wrapper {
		border-radius: 5px;
		background-color: #fff;
		padding: 7px;
	}
	
	section .wrapper .title {
		height: 38px;
		-webkit-align-items: center;
		align-items: center;
		border-bottom: 1px dashed #ccc;
	}
	
	section .wrapper .title img {
		width: 18px;
	}
	
	section .wrapper .title span {
		color: #999;
		font-size: 12px;
		margin-left: 5px;
	}
	
	section .wrapper .info {
		border-bottom: 1px dashed #ccc;
		margin-top: 17px;
	}
	
	section .wrapper .info ul li {
		-webkit-align-items: center;
		align-items: center;
		padding-bottom: 19px;
	}
	
	section .wrapper .info ul li img {
		width: 4px;
	}
	
	section .wrapper .info ul li span {
		font-size: 14px;
	}
	
	section .wrapper .info ul li span.key {
		width: 85px;
		color: #999;
		margin-left: 8px;
	}
	
	section .wrapper .tip {
		-webkit-align-items: center;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-top: 12px;
	}
	
	section .wrapper .tip img {
		width: 20px;
		margin-right: 7px;
	}
	
	section .wrapper .control {
		margin: 43px 0 30px;
	}
	
	section .wrapper .control .btn {
		border-radius: 20px;
		flex: 1;
		padding: 7px 0;
		text-align: center;
		font-size: 18px;
	}
	
	section .wrapper .control .yes {
		background-color: #f69000;
		color: #fff;
		margin-right: 6px;
		position: relative;
	}
	
	section .wrapper .control .no {
		background-color: #fff;
		color: #999;
		margin-left: 6px;
		border: 1px solid #999;
		border-sizing: border-box;
	}
	
	section .msg {
		margin-top: 15px;
		color: #999;
		font-size: 14px;
		line-height: 24px;
	}
	
</style>
</head>
<body>
	<header>
		<div class="icon flexbox" id="back"><img src="/assets/img/order_back.png" /></div>
		<h2>行驶证信息</h2>
		<div class="icon user flexbox" id="back"><a href="#"></a><img src="/assets/img/order_user.png" /></div>
	</header>
		
	<section id="app">
		<div class="wrapper">
			<div class="title flexbox">
				<img src="/assets/img/orcshibie-icon-orcshibieyemian@2x.png" />
				<span>行驶证内容信息</span>
			</div>
			<div class="info">
				<ul id="carinfo"></ul>
			</div>
			<div class="tip">
				<img src="/assets/img/tishizhuyiyemian-orcshibie@2x.png" />
				<span>请确认识别信息是否与车辆行驶证上信息一致</span>
			</div>
			<div class="control flexbox">
				<a href="javascript:;" class="btn yes" id="yes">是</a>
				<a href="/makeprice/resetxsz" class="btn no">否</a>
			</div>
		</div>
		<div class="msg">温馨提示：为确保车辆信息的一致性，请您认真核对以上行驶证上的信息。</div>
	</section>
	
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
		$(function(){
			$('#back').click(function(){
		    	window.history.go(-1);
		    });
			
			var data = _x.getSessionStorage("xxIdentify")
			if (_x.isEmpty(data)) {
				_x.showTip("暂无数据！")
			} else {
				var html = "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>车牌号：</span>"+
						   "	<span class='value'>"+ data.plate_num +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>品牌型号：</span>"+
						   "	<span class='value'>"+ data.model +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>VIN代码：</span>"+
						   "	<span class='value'>"+ data.vin +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>发动机号：</span>"+
						   "	<span class='value'>"+ data.engine_num +"</span>"+
						   "</li>"+
						   "<li class='flexbox'>"+
						   "	<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />"+
						   "	<span class='key'>注册日期：</span>"+
						   "	<span class='value'>"+ data.register_date +"</span>"+
						   "</li>"
				$("#carinfo").html(html)
			}
          	
			var yesSubmit = true
			$("#yes").click(function(){
				if (!yesSubmit) {
					return
				}
				
				var that = $(this),
					data = _x.getSessionStorage("xxIdentify")
				if (_x.isEmpty(data)) {
					_x.showTip("暂无行驶证信息！")
					return
				}
				
				yesSubmit = false
				that.html("<div class='textloading'></div>")
				var saveData = {
					carFrameNo: data.vin,
					carPlateNo: data.plate_num,
					carEngineNo: data.engine_num,
					registrationDate: data.register_date,
					carType: data.model
				}
				
				axios.post("/makeprice/submitCarCard", _x.qsStringify(saveData))
				.then(function(res){
					if (res.data.code == 1) {
						_x.showTip(res.data.msg, {
							url: "/makeprice/carconfigure"
						})
					} else {
						yesSubmit = true
						that.html("是")
						_x.showTip(res.data.msg)
					}
				})
				.catch(function(){
					yesSubmit = true
					that.html("是")
					_x.showTip("提交失败，请稍后重试！")
				})
			}) 
		})
	</script>
</body>
</html>
